<template>
  <section id="tixianCount">

    <el-row :gutter="10" style="align-items: center" class="flex">
      <el-col :span="6" class='flex'>
        <span class="title1" style='white-space:nowrap'>开始日期:</span>
        <el-date-picker size="small"
          v-model="form.beginTime"
          type="datetime"
          @change="change1"
          placeholder="选择日期时间">
        </el-date-picker>
      </el-col>
      <el-col :span="6"  class='flex'>
        <span class="title1" style='white-space:nowrap;padding: 0 3px'>结束日期:</span>
        <el-date-picker size="small"
          v-model="form.endTime"
          type="datetime"
          @change="change2"
          placeholder="选择日期时间">
        </el-date-picker>
      </el-col>
      <el-col :span="4" class="flex">
        <span style="white-space: nowrap">用户名：</span>
        <el-select size="small" v-model="form.userId" clearable placeholder="请选择">
          <el-option
            v-for="item in userList"
            :key="item.id"
            :label="item.username"
            :value="item.id">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="7" class="flex" style="justify-content: flex-start;">
        <el-button type="primary" size="small" @click="getAliPayCountList">查询</el-button>
        <el-button type="primary" size="small" @click="getAliPayCountList(1)">今天</el-button>
        <el-button type="primary" size="small" @click="getAliPayCountList(2)">昨天</el-button>
      </el-col>
    </el-row>

    <el-table :data="tableData" border stripe style="width: 100%" v-loading="loading">
      <el-table-column type="index" width="80">
      </el-table-column>
      <el-table-column prop="failMoney" label="失败金额" >
      </el-table-column>
      <el-table-column prop="failNumber" label="失败数量" >
      </el-table-column>
      <el-table-column prop="successMoney" label="成功金额" >
      </el-table-column>
      <el-table-column prop="successNumber" label="成功数量" >
      </el-table-column>
      <el-table-column prop="waitMoney" label="等待金额" >
      </el-table-column>
      <el-table-column prop="waitNumber" label="等待数量" >
      </el-table-column>
    </el-table>
    <!--<div class="block" style="text-align: right;padding: 10px 20px;">-->
    <!--<el-pagination-->
    <!--@current-change="handleCurrentChange"-->
    <!--:current-page.sync="form.pageNumber"-->
    <!--:page-size="form.pageSize"-->
    <!--layout="total, prev, pager, next"-->
    <!--:total="total">-->
    <!--</el-pagination>-->
    <!--</div>-->
  </section>
</template>

<script>
  import dateformat from 'dateformat'
  export default {
    data () {
      return {
        tableData: [],
        total: 1,
        form: {
          beginTime: undefined,
          endTime: undefined,
          userId: undefined
        },
        loading: false,
        userList: []
      }
    },
    created () {
//    this.getAliPayList()
    this.getUserList()
    },
    methods: {
      getAliPayCountList(mes){
        this.loading = true
        if(this.form.beginTime == ''){
          this.form.beginTime = undefined
        }
        if(this.form.endTime == ''){
          this.form.endTime = undefined
        }
        var timeStamp = new Date(new Date().setHours(0, 0, 0, 0)) / 1000;

        if (mes == 1) {
          //今天的
          this.form.beginTime = timeStamp * 1000
          this.form.endTime = undefined
        }
        if (mes == 2) {
          //昨天的
          this.form.beginTime = timeStamp * 1000 - 86400 * 1000
          this.form.endTime = timeStamp * 1000
        }
        this.$api.getTixianCount(this.form).then(res=>{
          if(res.code == '000000'){
            this.tableData = []
            this.loading = false;
            this.tableData.push(res.data)
            this.tableData.forEach(item=>{
              if(item.payDate){
                let date = new Date(item.payDate);
                item.payDate = dateformat(date, 'yyyy-mm-dd HH:MM')
              }
            })
            this.$message.success("查询成功")
          }
        })
      },
      getUserList() {
        let params = {
          pageSize: 9999
        }
        this.$api.getUserList(params).then(res => {
          if (res.code == '000000') {
            this.userList = res.data.list;
          }
        })
      },
      change1 (val) {
        if(!val){
          this.form.beginTime =undefined
        }else{
          this.form.beginTime = Date.parse(val);
        }
      },
      change2 (val) {
        if(!val){
          this.form.endTime =undefined
        }else{
          this.form.endTime = Date.parse(val);
        }
      },
      handleCurrentChange(val){
        this.form.pageNumber = val
        this.getAliPayList()
      }
    }

  }
</script>

<style lang="less">
  #tixianCount{
    th{
      text-align: center;
    }
    .flex {
      align-items: center;
      padding-bottom: 10px;
      /*border-bottom: 1px solid #ccc;*/
      .solid{
        width: 2px;
        height: 30px;
        background-color: green;
      }
      .item2{
        padding-left: 20px;
        font-weight: bold;
        padding-right: 20px;
      }
    }
    /*.el-input__inner {*/
      /*height: 25px;*/
      /*font-size: 12px;*/
    /*}*/
    /*.el-input {*/
      /*!*width: 170px;*!*/
      /*display: inline-block;*/
      /*margin: 0 8px;*/
      /*margin: 0;*/
    /*}*/

    .title1{
      font-size: 14px;
      padding-right: 6px;
    }
  }
</style>
